<template>
  <div class="user-center layout">
    <div class="h reletive">
      <div class="wrapper">
        <div
          class="h-inner"
          style="
            background-image: url(https://img.hoshinagi.top/tool/user/cover.webp);
          "
        >
          <div class="h-gradient"></div>
          <div class="h-user">
            <div class="h-info">
              <div class="avatar-container">
                <div style="width: 60px; height: 60px">
                  <img
                    class="avatar fit-cover"
                    :src="uStore.userInfo?.avatar"
                  />
                </div>
              </div>
              <div class="h-basic">
                <div>
                  <span class="h-name">{{ uStore.userInfo?.name }}</span>
                </div>
                <div class="h-basic-desc">
                  <h4>{{ uStore.userInfo?.description }}</h4>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="navigator" class="n">
      <div class="wrapper">
        <div class="n-inner">
          <div class="n-statistics">
            <div class="n-data">
              <p class="n-data-text">关注</p>
              <p class="n-data-v n-gz">{{ userDetailInfo?.followCount }}</p>
            </div>
            <div class="n-data">
              <p class="n-data-text">粉丝</p>
              <p class="n-data-v n-gz">{{ userDetailInfo?.followersCount }}</p>
            </div>
            <div class="n-data">
              <p class="n-data-text">投稿</p>
              <p class="n-data-v n-gz">{{ userDetailInfo?.postCount }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="s-space">
      <div>
        <div id="page-follows" class="wrapper clearfix master">
          <div class="follow col-full clearfix flex">
            <div class="follow-sidenav">
              <div class="nav-container follow-container">
                <div class="nav-title">
                  <span class="text">关注</span>
                </div>
                <div class="scrollbar follow-list-container">
                  <ul class="follow-list">
                    <li
                      :class="
                        tagId === 1
                          ? 'follow-item flex flex-ac cur'
                          : 'follow-item flex flex-ac'
                      "
                      @click="handleClickNav(1)"
                    >
                      <i class="xzfont icon-wodeguanzhu"></i>
                      <router-link
                        to="/user/center?tagid=1"
                        class="text follow-item-text"
                        >全部关注</router-link
                      >
                      <span class="num">{{ userDetailInfo?.followCount }}</span>
                    </li>
                    <li
                      :class="
                        tagId === 2
                          ? 'follow-item flex flex-ac cur'
                          : 'follow-item flex flex-ac'
                      "
                      @click="handleClickNav(2)"
                    >
                      <i class="xzfont icon-huxiangguanzhu"></i>
                      <router-link
                        to="/user/center?tagid=2"
                        class="text follow-item-text"
                        >互相关注</router-link
                      >
                      <span class="num">{{ userDetailInfo?.eachFollow }}</span>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="nav-container follow-container">
                <div class="nav-title">
                  <span class="text">粉丝</span>
                </div>
                <div class="scrollbar follow-list-container">
                  <ul class="follow-list">
                    <li
                      :class="
                        tagId === 3
                          ? 'follow-item flex flex-ac cur'
                          : 'follow-item flex flex-ac'
                      "
                      @click="handleClickNav(3)"
                    >
                      <i class="xzfont icon-fensi"></i>
                      <router-link
                        to="/user/center?tagid=3"
                        class="text follow-item-text"
                        >全部粉丝</router-link
                      >
                      <span class="num">{{
                        userDetailInfo?.followersCount
                      }}</span>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="nav-container follow-container">
                <div class="nav-title">
                  <span class="text">投稿管理</span>
                </div>
                <div class="scrollbar follow-list-container">
                  <ul class="follow-list">
                    <li
                      :class="
                        tagId === 4
                          ? 'follow-item flex flex-ac cur'
                          : 'follow-item flex flex-ac'
                      "
                      @click="handleClickNav(4)"
                    >
                      <i class="xzfont icon-tougao2"></i>
                      <router-link
                        to="/user/center?tagid=4"
                        class="text follow-item-text"
                        >投稿</router-link
                      >
                    </li>
                    <li
                      :class="
                        tagId === 5
                          ? 'follow-item flex flex-ac cur'
                          : 'follow-item flex flex-ac'
                      "
                      @click="handleClickNav(5)"
                    >
                      <i class="xzfont icon-gaojian"></i>
                      <router-link
                        to="/user/center?tagid=5"
                        class="text follow-item-text"
                        >我的稿件</router-link
                      >
                      <span class="num">{{ userDetailInfo?.postCount }}</span>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="nav-container follow-container">
                <div class="nav-title">
                  <span class="text">个人信息</span>
                </div>
                <div class="scrollbar follow-list-container">
                  <ul class="follow-list">
                    <li
                      :class="
                        tagId === 6
                          ? 'follow-item flex flex-ac cur'
                          : 'follow-item flex flex-ac'
                      "
                      @click="handleClickNav(6)"
                    >
                      <i class="xzfont icon-weibiaoti2010104"></i>
                      <router-link
                        to="/user/center?tagid=6"
                        class="text follow-item-text"
                        >修改信息</router-link
                      >
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="center-main-content">
              <KeepAlive>
                <component :is="currentComponent"></component>
              </KeepAlive>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import userStore from "@/store/user";
import Follow from "@/components/Follow.vue";
import Fans from "@/components/Fans.vue";
import FriendList from "@/components/FriendList.vue";
import Contribute from "@/components/Contribute.vue";
import MyPost from "@/components/MyPost.vue";
import EditInfo from "@/components/EditInfo.vue";
import { useRoute } from "vue-router";
import { watch, ref, markRaw, onMounted } from "vue";
import { getUserDetailInfo } from "@/api/user";

const componentMap = {
  1: markRaw(Follow),
  2: markRaw(FriendList),
  3: markRaw(Fans),
  4: markRaw(Contribute),
  5: markRaw(MyPost),
  6: markRaw(EditInfo),
};

const userDetailInfo = ref<UserDetailInfo | null>(null);

const currentComponent = ref(componentMap[1]);

const route = useRoute();

const uStore = userStore();

const tagId = ref<number>(1);

watch(
  () => route.query.tagid,
  (newValue, _oldValue) => {
    tagId.value = parseInt(newValue as string) || 1;
    currentComponent.value =
      componentMap[tagId.value as keyof typeof componentMap];
  },
  {
    immediate: true,
  }
);

const handleClickNav = (id: number) => {
  tagId.value = id;
};

onMounted(async () => {
  const result = await getUserDetailInfo();
  userDetailInfo.value = result.data.data;
});
</script>

<style scoped lang="scss">
.h {
  .h-inner {
    background-position: 50%;
    background-size: cover;
    transition: background-image 0.2s ease, background-size 1s ease;
    padding-top: 116px;
    position: relative;

    .h-gradient {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 84px;
      background-image: url();
      background-repeat: repeat-x;
    }

    .h-user {
      position: relative;
      z-index: 1;

      .h-info {
        margin-left: 20px;
        padding-bottom: 16px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;

        .avatar-container {
          .avatar {
            border: 2px solid hsla(0, 0%, 100%, 0.4);
          }
        }

        .h-basic {
          margin-left: 22px;
          color: #fff;

          .h-name {
            display: inline-block;
            margin-right: 5px;
            font-weight: 700;
            line-height: 18px;
            font-size: 18px;
            vertical-align: middle;
          }

          .h-basic-desc {
            margin-top: 6px;
            color: hsla(0, 0%, 100%, 0.8);
            font-size: 12px;
            font-family: Microsoft Yahei;
            line-height: 26px;
            height: 26px;
            margin-left: -5px;
            padding: 0 5px;
            position: relative;
            top: -1px;
            width: 730px;
          }
        }
      }
    }
  }
}

.n {
  margin-bottom: 10px;

  .n-inner {
    height: 66px;
    background: var(--xz-card-bg);
    // box-shadow: 0 0 0 1px #eee;
    border-radius: 0 0 4px 4px;
    padding: 0 20px;
    font-size: 0;

    .n-statistics {
      float: right;
      height: 66px;

      .n-data {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-pack: center;
        justify-content: center;
        float: left;
        height: 66px;
        padding: 10px 5px;
        text-align: center;
        box-sizing: border-box;

        .n-data-text {
          line-height: 14px;
          font-size: 12px;
          color: #99a2aa;
        }

        .n-data-v {
          line-height: 16px;
          margin-top: 5px;
          font-size: 12px;
          color: var(--xz-fontcolor);
        }
      }
    }
  }
}

.wrapper {
  width: 1283px !important;
  margin: 0 auto;
  position: relative;
}
</style>
